<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 130px;
  height: 110px;
  line-height: 178px;
  text-align: center;
}

.el-table--border th.el-table__cell, .el-table__fixed-right-patch {
  background-color: #333333;
  color: #ffffff;
}

</style>

<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/' }" style="font-size: 19px;">
        <i class="el-icon-s-home"></i> 个人中心
      </el-breadcrumb-item>
      <el-breadcrumb-item style="font-size: 17px">轮播图管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div style="margin: 24px 0 12px 0">
      <el-divider></el-divider>
    </div>

    <el-button style="margin-bottom: 12px" @click="addNewVisible = true" type="success">新增</el-button>
    <el-button type="primary" @click="loadSlideshowList">刷新</el-button>

    <!--  表格  -->
    <el-table
        empty-text="暂无数据，请再试一次！"
        class="table"
        ref="multipleTable"
        :data="slideshowData"
        border
        style="width: 100%">
      <el-table-column prop="id" header-align="center" align="center" label="ID" width="200"></el-table-column>
      <el-table-column prop="admName" header-align="center" align="center" label="发布人"
                       width="280"></el-table-column>
      <el-table-column prop="photo" header-align="center" align="center" label="图片" width="310">
        <template slot-scope="scope">
          <img
              style="width: 120px; height: 100px"
              :src="scope.row.photo<1?'':require('../img/admin/'+scope.row.photo)"
              :alt="scope.row.photo<1?'未发布':'加载失败'">
        </template>
      </el-table-column>
      <el-table-column prop="gmtCreate" header-align="center" align="center" label="发布时间"
                       width="300"></el-table-column>

      <!--操作-->
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-popconfirm
              @confirm="deleteSlideshow(scope.row)"
              confirm-button-text='确定'
              cancel-button-text='取消'
              icon="el-icon-info"
              icon-color="red"
              title="确定要删除该轮播图吗？">
            <el-button icon="el-icon-delete" round size="medium" type="danger"
                       slot="reference">删除
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!--  弹出添加轮播图的弹框  -->
    <el-dialog :destroy-on-close="true" title="添加轮播图" :visible.sync="addNewVisible">
      <el-form label-width="100px" class="demo-ruleForm">
        <el-form-item label="图片">
          <el-upload
              :on-remove="handleRemove"
              :limit="1"
              list-type="picture-card"
              class="avatar-uploader"
              action="http://localhost:8081/admin/upload"
              :on-success="handleSuccess"
              :before-upload="beforeAvatarUpload">
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-button style="margin-left: 130px" type="danger" @click="addNewSli()">发布</el-button>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      slideshowData: [],
      addNewVisible: false,
      addNewSlideshow: '',
    }
  },
  methods: {
    //撤销上传图片
    handleRemove(file, fileList) {
      console.log("需要移除的文件是" + file, fileList);
      console.log("需要移除的uuid值是" + file.response);
      let url = 'http://localhost:8081/admin/uploadDelete/uuid=' + file.response;
      console.log('执行图片撤销的请求路径是：' + url);
      this.axios.create({'headers': {'Authorization': localStorage.getItem('adminJwt')}})
          .post(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.$notify.success({
            title: '提示',
            message: '撤销图片成功！',
            showClose: true,
            position: 'top-right'
          });
          this.addNewSlideshow = '';
        } else {
          this.$notify.warning({
            title: '提示',
            message: responseBody.message,
            showClose: true,
            position: 'top-right'
          });
        }
      });
    },
    //图片上传成功后
    handleSuccess(response) {
      console.log(response);
      this.addNewSlideshow = response;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },

    //删除轮播图
    deleteSlideshow(slideshow) {
      this.axios.create({'headers': {'Authorization': localStorage.getItem('adminJwt')}})
          .get('http://localhost:8081/slideshow/' + slideshow.id + '/delete').then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.loadSlideshowList();
          this.$notify.success({
            title: '提示',
            message: '成功删除id为' + slideshow.id + '的轮播图!',
            showClose: true,
            position: 'top-right'
          });
        } else {
          this.$notify.warning({
            title: '提示',
            message: responseBody.message,
            showClose: true,
            position: 'top-right'
          });
          this.loadSlideshowList();
        }
      });
    },
    //展示轮播图列表
    loadSlideshowList() {
      let url = 'http://localhost:8081/slideshow/list';
      console.log('轮播图展示请求的url是' + url);
      this.axios.create({'headers': {'Authorization': localStorage.getItem('adminJwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.slideshowData = responseBody.data;
        } else {
          this.$notify.warning({
            title: '提示',
            message: responseBody.message,
            showClose: true,
            position: 'top-left'
          });
        }
      })
    },

    //添加轮播图
    addNewSli() {
      if (this.addNewSlideshow == '') {
        this.$notify.success({
          title: '提示',
          message: '请选择照片!!',
          showClose: true,
          position: 'top-right'
        });
        return;
      }
      let url = 'http://localhost:8081/slideshow/photo=' + this.addNewSlideshow + '/addNew';
      console.log('添加轮播图请求的url是' + url);
      this.axios.create({'headers': {'Authorization': localStorage.getItem('adminJwt')}})
          .post(url, this.addNewSlideshow).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.$notify.success({
            title: '提示',
            message: "添加轮播图成功！",
            showClose: true,
            position: 'top-right'
          });
          this.addNewVisible = false;
          this.loadSlideshowList();
          this.addNewSlideshow = '';
        } else {
          this.$notify.warning({
            title: '提示',
            message: responseBody.message,
            showClose: true,
            position: 'top-right'
          });
        }
      })
    },
  },
  mounted() {
    this.loadSlideshowList();
  }
}
</script>
